主菜會需要
同理要寫一個線上地圖有2個不可或缺的東西地圖套件 & 圖資
以下我會使用來製作
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>leaflet + OSM 製作免費線上地圖</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
<style>
body {
background-color: black;
padding: 0;
margin: 0;
}
.wrapper {
width: 99dvw;
height: 99dvh;
display: flex;
justify-content: center;
align-items: center;
}
#map {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<!-- 給地圖一個高 -->
<div class="wrapper">
<div id="map"></div>
</div>
<script>
const myMap = {
map: null,
init() {
this.map = L.map("map").setView([25.033, 121.5654], 14);
//圖層
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "© OpenStreetMap contributors",
}).addTo(this.map);
},
main() {
// 點
const taipei101 = L.latLng(25.0339, 121.5646);
const daAnPark = L.latLng(25.0327467, 121.5343);
const lineConfig = {
color: "red",
weight: 3,
};
// 生成一條線
const polyline = L.polyline([taipei101, daAnPark], lineConfig)
.addTo(this.map)
.bindPopup("大安森林公園~台北101");
// 生成地標
L.marker(taipei101).addTo(this.map).bindPopup("台北101");
L.marker(daAnPark).addTo(this.map).bindPopup("大安森林公園");
},
};
myMap.init();
myMap.main();
</script>
</body>
</html>
//https://leafletjs.com/reference.html#map
//綁定地圖並生成
L.map("map")
//https://leafletjs.com/reference.html#tilelayer
//第一個參數為圖資網址 s: subdomains; z: zoom; x,y: 經緯度
//第二個參數是設定檔
//給予圖層(圖資)
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "© OpenStreetMap contributors",
}).addTo(this.map);
//https://leafletjs.com/reference.html#latlngbounds
//透過經緯度生成一個點(還沒加到地圖上~)
const taipei101 = L.latLng(25.0339, 121.5646);
//https://leafletjs.com/reference.html#polyline
//產生一條線
//第一個參數是兩個點組成的[]
//第二個參數是線的設定檔
const lineConfig = {
color: "red",
weight: 3,
};
const polyline = L.polyline([taipei101, daAnPark], lineConfig)
//https://leafletjs.com/reference.html#marker
//透過點產生一個地標
L.marker(taipei101)
//將生成的物件掛到地圖上顯示
//生成的地標 & 線 都具有的方法
//return this
//https://leafletjs.com/reference.html#layer-bindpopup
//在地圖上綁定對話框
今天我們學會了
下一篇來做出一個公車路線圖(地標&線)~
iThome鐵人賽
看影片追技術
看更多